<template>
  <div class="cont-area">
    <el-form :inline="true" :model="form" class="demo-form-inline">
      <el-form-item label="项目名称">
        <el-input v-model="form.name" placeholder="请输入" size="small"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search" size="mini" v-hasPermi="['bigdata:project:list']">查询</el-button>
        <el-button type="primary" @click="reset" size="mini">重置</el-button>
      </el-form-item>
      <el-form-item class="fr">
        <el-button type="primary" @click="handleAdd()" size="mini" v-hasPermi="['bigdata:project:add']">添加</el-button>
        <el-button type="danger" @click="handleDel()" size="mini" :disabled="this.multipleSelection.length < 1"
          v-hasPermi="['bigdata:project:remove']">批量删除</el-button>
      </el-form-item>
    </el-form>
    <div ref="tableAreaRef" class="table-area">
      <el-table ref="multipleTable" :data="list" tooltip-effect="dark" style="width: 100%" v-loading="isLoading"
        @selection-change="handleSelectionChange" class="my-table" :height="tableHeight">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="projectName" label="项目名称" show-overflow-tooltip>
          <template slot-scope="scope">
            <a href="javascript:;" @click="handleRouterLink(scope.row)">{{ scope.row.projectName }}</a>
          </template>
        </el-table-column>
        <el-table-column prop="projectDesc" label="描述" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="createdBy" label="创建人" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="createdTime" label="创建时间" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="updatedBy" label="更新人" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="updatedTime" label="更新时间" show-overflow-tooltip> </el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleEdit(scope.row)"
              v-hasPermi="['bigdata:project:edit']">编辑</el-button>
            <el-button type="text" size="small" @click="handleDel(scope.row)" class="danger"
              v-hasPermi="['bigdata:project:remove']">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <Pagination :totalSize="totalSize" :page.sync="pageInfo.pageNo" :limit.sync="pageInfo.pageSize"
      @getList="getList" />

    <EditProject @getList="search" />

  </div>
</template>

<script>
import { Vue, Component, Watch } from 'vue-property-decorator'
import { mapActions, mapMutations, mapState } from 'vuex'
import { cloneDeep } from 'lodash'

import Pagination from '@/components/Pagination'
import EditProject from '@/components/EditProject'

@Component({
  components: {
    Pagination,
    EditProject
  },
  methods: {
    ...mapActions({
      getProjectList: 'GET_PROJECT_LIST', // 列表
      deleteProject: 'DELETE_PROJECT', // 删除
      getProjectById: 'GET_PROJECT_BY_ID', // 详情
    }),
    ...mapActions('EditProjectModal', {
      callEditProjectModal: 'CALL_MODAL',
    }),
    // ...mapMutations({
    // setProjectName: 'SET_PROJECT_NAME'
    // }),
  }
})

export default class ProjectList extends Vue {
  list = []
  multipleSelection = []
  isLoading = false
  tableHeight = 400
  totalSize = 0
  form = {
    name: ''
  }
  pageInfo = {
    pageNo: 1,
    pageSize: 10,
  }

  // 新增
  handleAdd() {
    this.callEditProjectModal({ editInfo: { type: 'add', id: '' }, data: {} })
  }
  // 查询
  search() {
    this.pageInfo.pageNo = 1
    this.getList()
  }
  // 重置
  reset() {
    this.form.name = ''
    this.search()
  }

  // 获取列表
  async getList() {
    this.isLoading = true
    const parmas = {
      ...this.pageInfo,
      projectName: this.form.name
    }

    const res = await this.getProjectList(parmas)
    if (res.code = 100000) {
      this.isLoading = false
      this.totalSize = Number(res.result.total)
      this.list = cloneDeep(res.result.records)
    }
  }

  // 多选
  handleSelectionChange(val) {
    this.multipleSelection = val;
  }

  // 编辑
  async handleEdit({ id }) {
    const res = await this.getProjectById(id)
    this.callEditProjectModal({ editInfo: { type: 'edit', id }, data: res.result })
  }

  // 删除
  handleDel(row) {
    this.$confirm(
      '您确定要删除此条数据吗？请注意，此操作无法还原。',
      '提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
    ).then(async () => {
      this.confirmDelete(row)
    })
  }
  // 删除确认
  async confirmDelete(row) {
    try {
      let ids = row ? [row.id] : this.multipleSelection.map(v => v.id)
      const res = await this.deleteProject(ids)
      if (res.code == 100000) {
        this.msgSuccess('操作成功')
        this.search()
      }
      // this.checkResCode(res.code, this.search)
    } catch (e) {
      console.log(e)
    }
  }

  // 跳转
  handleRouterLink({ id, projectName }) {
    localStorage.setItem('projectName', projectName)
    this.$router.push({
      name: 'dataSource',
      params: { projectId: id }
    })
  }
  mounted() {
    this.search()
    this.$nextTick(() => {
      this.tableHeight = this.$refs.tableAreaRef.clientHeight
    })
  }
}
</script>
<style lang="scss" scoped>
.cont-area {
  display: flex;
  flex-direction: column;
  height: 100%;

  .table-area {
    flex: 1;
    overflow: hidden;
    // margin-bottom: 5px;
  }


  .el-form {
    height: 40px;
    box-shadow: 0px 1px 6px -2px rgb(51, 51, 51);
    padding: 0 10px;
    margin-bottom: 5px;
  }
}
</style>
